<template>
  <view class="wrap">
    <view class="header">
      <img class="headerBg" src="https://ainengli.hzjrsw.com/jkhx/healthProgramme.png" alt="" />
      <view class="headerWrap">
        <text>健康管理方案</text>
        <text class="name">为您的健康保驾护航</text>
      </view>
      <view class="healthList">
        <view class="item">
          <img class="bg" src="https://ainengli.hzjrsw.com/jkhx/healthReport.png" alt="" />
          <view class="content">
            <text class="name">健康管理报告</text>
            <text class="subName">健康风险评估</text>
          </view>
        </view>
        <view @tap="toQuestionaire" class="item">
          <img class="bg" src="https://ainengli.hzjrsw.com/jkhx/healthQuestionnaire.png" alt="" />
          <view class="content on">
            <text class="name">健康评估问卷</text>
            <text class="subName">可视化健康分析</text>
          </view>
        </view>
      </view>
    </view>
    <view class="wrapTab">
      <view class="title">所有健康任务</view>
      <scroll-view class="scroll-X" scroll-x="true">
        <view class="tabList">
          <view
            :class="['item', state.active == index ? 'on' : '']"
            v-for="(item, index) in healthTaskDetailList"
            :key="index"
            @tap="tabFun(index)"
          >
            {{ item.type }}
          </view>
        </view>
      </scroll-view>
      <view class="taskList" v-if="state.isShow">
        <VirtualList :dateIndex="dateIndex" :listData="dateList" :itemSize="88"></VirtualList>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { taskAllDate } from '@/api/hmm'
import VirtualList from '@/pages/login/VirtualList.vue'
const state = reactive({
  userInfo: {},
  getUserId: '',
  list: [],
  active: 0,
  heighted: '',
  isShow: false
})
const healthTaskDetailList = ref([])
const dateList = ref([])
const dateIndex = ref(0)
onShow(() => {
  state.userInfo = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
  state.getUserId = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).userId
    : ''
  init()
})
const init = () => {
  healthTaskDetailList.value = []
  dateList.value = []
  state.active = 0
  state.isShow = false
  uni.showLoading({
    title: '加载中'
  })
  let param = state.userInfo.empi + '/' + state.getUserId
  taskAllDate(param).then((res) => {
    uni.hideLoading()
    if (res.code == 0) {
      healthTaskDetailList.value = res.data && res.data.length > 0 ? res.data : []
      dateList.value =
        res.data &&
        res.data.length > 0 &&
        res.data[0] &&
        res.data[0].hepTaskDetailVO &&
        res.data[0].hepTaskDetailVO.length > 0
          ? res.data[0].hepTaskDetailVO
          : []
      state.isShow = true
    }
  })
}
const tabFun = (index) => {
  state.active = index
  dateIndex.value = index
  dateList.value =
    healthTaskDetailList.value[index] &&
    healthTaskDetailList.value[index].hepTaskDetailVO &&
    healthTaskDetailList.value[index].hepTaskDetailVO.length > 0
      ? healthTaskDetailList.value[index].hepTaskDetailVO
      : []
}
const toQuestionaire = () => {
  uni.navigateTo({ url: '/packA/pages/questionaire/enter' })
}
</script>

<style lang="scss" scoped>
.cf {
  zoom: 1;
}
.cf::after {
  display: block;
  height: 0;
  clear: both;
  font-size: 0;
  content: '.';
  visibility: hidden;
}
.wrap {
  height: 100vh;
  overflow: hidden;
  background: #fff;
  .header {
    height: 396rpx;
    position: relative;
    .headerBg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
    }
    .headerWrap {
      display: inline-block;
      z-index: 1;
      position: relative;
      margin: 64rpx 0 0 32rpx;
      font-size: 48rpx;
      color: #025568;
      font-weight: 700;
      .name {
        font-weight: 400;
        color: #296576;
        font-size: 28rpx;
        display: block;
        margin-top: 15rpx;
      }
    }
    .healthList {
      display: flex;
      gap: 22rpx;
      align-items: center;
      margin: 32rpx 32rpx 0;
      .item {
        position: relative;
        height: 160rpx;
        display: flex;
        justify-content: left;
        align-items: center;
        z-index: 1;
        width: 100%;
        padding: 32rpx 24rpx;
        .bg {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: block;
          z-index: 1;
        }
        .content {
          position: relative;
          z-index: 1;
          .name {
            font-size: 36rpx;
            color: #045a71;
            font-weight: 700;
          }
          .subName {
            font-size: 24rpx;
            color: #045a71;
            display: block;
            margin-top: 12rpx;
          }
          &.on {
            .name {
              color: #923500;
            }
            .subName {
              color: #923500;
            }
          }
        }
      }
    }
  }
  .wrapTab {
    margin: 24rpx 32rpx 0;
    padding-bottom: 64rpx;
    .title {
      font-size: 32rpx;
      color: #222;
      font-weight: 700;
    }
    .scroll-X {
      margin-top: 24rpx;
      padding-block: 12rpx;
      .tabList {
        white-space: nowrap;
        width: auto;
        .item {
          display: inline-block;
          vertical-align: middle;
          padding: 0 24rpx;
          height: 56rpx;
          line-height: 56rpx;
          font-size: 28rpx;
          color: #666;
          &:nth-last-child(1) {
            margin-right: 0;
          }
          &.on {
            background: #00d1b6;
            border-radius: 28rpx;
            color: #fff;
          }
        }
      }
    }
    .taskList {
      height: calc(100vh - 590rpx);
      //   height: 388rpx;
      overflow: auto;
      border-radius: 12rpx;
      //   margin-top: 24rpx;
    }
  }
}
</style>
